<template>
	<div>
		<image :src="getImageURL(bgImg)" class="bg" />

		<view class="wrap">
			<view class="title-bg">
				<image class="img" src="/static/images/video_title_line.png" />
				<view class="title"> 创友映像 </view>
				<image class="img" src="/static/images/video_title_line.png" />

				<view class="en-title"> CREATIVE IMAGE </view>
			</view>

			<view class="wrap-list">
				<block v-for="(item, index) in list" :key="index">
					<view class="item" @click="onItem(item)">
						<image :src="getImageURL(item.icon)" lazy-load @error="onImageError(index)" />
					</view>
				</block>
			</view>
		</view>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				bgImg: "", //背景图片
				list: [],
			};
		},
		onLoad() {
			this.$filters.getConfig((data) => {
				this.bgImg = data.impressionBg;
				this.list = [
					{
						title: "官方宣传片",
						eng: "OFFICIAL PROMOTIONAL FILM",
						icon: data.officialPromotionalLogo,
						bg: data.impressionBg1,
						type: 0,
					},
					{
						title: "院校宣传片",
						eng: "SCHOOL PROMOTIONAL FILM",
						icon: data.academyPromotionalLogo,
						bg: data.impressionBg2,
						type: 1,
					},
					{
						title: "越野赛影集",
						eng: "ROAD RACE FILM",
						icon: data.roadRacesLogo,
						bg: data.impressionBg3,
						type: 2,
					},
					{
						title: "创业赛影集",
						eng: "ENTREPRENEURSHIP FILM",
						icon: data.entrepreneurshipLogo,
						bg: data.impressionBg4,
						type: 3,
					},
					{
						title: "选手照片",
						eng: "PLAYER PHOTOS",
						icon: data.playerPhotosLogo,
						bg: data.impressionBg5,
						type: 4,
					},
				];
			});
		},
		onShow() {
			this.$filters.isLogin();
		},
		methods: {
			/**
			 * 图片加载失败
			 */
			onImageError(index) {
				this.list[index].cover = "/static/common/default_icon.png";
			},
			/**
			 * 点击
			 */
			onItem(item) {
				uni.navigateTo({
					url: `/pages/video/list?type=${item.type}&title=${item.title}&eng=${item.eng}&bg=${item.bg}`,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		z-index: -1;
	}
	.wrap {
		width: 100%;
		padding: 120rpx 15rpx;
		box-sizing: border-box;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;

		.title-bg {
			width: 100%;
			overflow: hidden;
			padding-bottom: 35rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			z-index: 1;

			.img {
				width: 144rpx;
				height: 3rpx;
			}

			.title {
				margin-left: 20rpx;
				margin-right: 20rpx;
				color: white;
				font-size: 50rpx;
				font-weight: bold;
			}

			.en-title {
				position: absolute;
				z-index: 2;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				color: white;
				font-size: 22rpx;
			}
		}

		.wrap-list {
			margin-top: 200rpx;
			width: 100%;
			overflow: hidden;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;

			.item {
				width: 235rpx;
				height: 235rpx;
				overflow: hidden;
				margin-right: 7.5rpx;
				margin-bottom: 10rpx;

				&:nth-child(3n) {
					margin-right: 0;
				}

				> image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>
